<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

type Product = {
  id: number
  title: string
  price: number
  description: string
  category: string
  image: string
  rating: {
    rate: number
    count: number
  }
}

const list1Data = ref<Product[]>([])
const list2Data = ref<Product[]>([])

const fetchData = async () => {
  try {
    const response1 = await fetch('https://fakestoreapi.com/products?limit=5')
    const response2 = await fetch('https://fakestoreapi.com/products?limit=10')
    const data1 = await response1.json()
    const data2 = await response2.json()
    list1Data.value = data1
    list2Data.value = data2
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

let intervalId: number | null = null
onMounted(() => {
  fetchData()
  intervalId = setInterval(fetchData, 10000)
})

onUnmounted(() => {
  clearInterval(intervalId as number | undefined)
})
</script>

<template>
  <main class="px-8">
    <section class="grid grid-cols-2 gap-x-4">
      <article class="w-full border border-slate-200 rounded-md p-4">
        <h2 class="text-2xl mb-4 font-bold text-slate-900">List I</h2>
        <ul class="divide-y divide-slate-100">
          <li v-for="item in list1Data" :key="item.id" class="flex items-start gap-4 px-4 py-3">
            <div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
              <h4 class="text-base text-slate-700">{{ item.title }}</h4>
            </div>
          </li>
        </ul>
      </article>
      <article class="w-full border border-slate-200 rounded-md p-4">
        <h2 class="text-2xl mb-4 font-bold text-slate-900">List II</h2>
        <ul class="divide-y divide-slate-100">
          <li v-for="item in list2Data" :key="item.id" class="flex items-start gap-4 px-4 py-3">
            <div class="flex flex-col gap-0 min-h-[2rem] items-start justify-center">
              <h4 class="text-base text-slate-700">{{ item.title }}</h4>
            </div>
          </li>
        </ul>
      </article>
    </section>


  </main>
</template>
